<template>
  <div class="DetailInfo">
    <div class="GoBack" @click="goBack()">
      <img src="https://m.mi.com/static/img/icon-back3.cee4a42398.png" />
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" @change="onChange">
      <van-swipe-item v-for="(imgs, index) in imgList" :key="index">
        <img :src="imgs.imagelink" />
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">{{ current + 1 }}/29</div>
      </template>
    </van-swipe>
    <div class="Information" v-for="(item, index) in infoList" :key="index">
      <div class="Price">
        {{ item.price }}
        <!-- {{title}} -->
      </div>
      <div
        style="
          text-align: left;
          margin-top: 10px;
          height: 30px;
          padding-left: 10px;
          padding-bottom: 10px;
          line-height: 30px;
          font-weight: 400;
          font-size: 12px;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        "
      >
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/84d5f1a65f4223e8fe1b076e93876441.png"
          style="height: 1.5rem; vertical-align: middle"
        />
        来这里，发现属于你的新品
      </div>
      <div class="textInfo">
        <span>{{ item.itemName }}</span>
        <ul>
          <li>
            <img
              src=""
            />
            【专业影像】超级夜景相机+120x潜望式变焦
          </li>
          <li>
            <img
              src=""
            />
            【性能突破】全新骁龙888+LPDDR5+UFS 3.1
          </li>
          <li>
            <img
              src=""
            />
            【灵动小窗】背屏小窗，重要事件不延后
          </li>
        </ul>
      </div>
      <div class="Parameters" @click="show = !show">
        <ul>
          <li v-for="(icon, index) in iconList" :key="index">
            <img :src="icon.icon" />
            <div style="font-size: 12px; margin-bottom: 5px">
              {{ icon.text }}
            </div>
            <div
              style="
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 80px;
                font-size: 12px;
                overflow: hidden;
              "
            >
              {{ item[icon.type] }}
            </div>
          </li>
        </ul>
      </div>
      <div class="UserComment">
        <input type="text" name="UserComment" placeholder="请输入您的评论" autocomplete="off" />
        <van-contact-card type="add" @click="add()" />
        <ul>
          <li class="Comments" v-for="(item,index) in userComment" :key="index">
            <a><img style="width:100%;height:100%;" src="https://semantic-ui.com/images/avatar/small/matt.jpg"/></a>
            <div class="CommentAuthor" style="margin-bottom:10px;">{{item.userName}}</div>
            <div class="CommentText">{{item.usercomment}}</div>
          </li>
        </ul>
      </div>
      <van-action-sheet v-model:show="show" title="关键参数">
        <div class="content">
          <ul>
            <li v-for="(icon, index) in iconList" :key="index">
              <div>
                {{ icon.text }}
                <span>{{ infoList[0][icon.type] }}</span>
              </div>
            </li>
          </ul>
        </div>
      </van-action-sheet>
      <van-action-sheet v-model:show="addShopCar">
        <div class="BuyPage">
          <header class="BuyInfo">
            <img :src="imgList[0].imagelink" />
            <div class="Price" style="margin-left:130px;">{{infoList[0].price}}</div>
          </header>
          <van-stepper v-model="ItemNum" step="1" />
          <footer class="BuyBtn"><van-button type="primary" block @click="buy()">确定</van-button></footer>
        </div>
      </van-action-sheet>
    </div>
  </div>
  <footer class="Pay">
    <van-action-bar>
      <van-action-bar-icon icon="wap-home-o" text="主页" @click="toHome()" />
      <van-action-bar-icon icon="chat-o" text="客服" @click="toConsult()" />
      <van-action-bar-icon icon="cart-o" :badge="badge" text="购物车" @click="toShopCar()" />
      <van-action-bar-button type="danger" text="加入购物车" color="#409EFF" @click="addShopCar=!addShopCar" />
    </van-action-bar>
  </footer>
</template>

<script>
export default {
  props:["title"],
  data() {
    return {
      current: 0,
      imgList: [],
      infoList: [],
      iconList: [
        {
          icon:
            "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f0c04e138bfed2b1ebb589de615236d1.png",
          text: "CPU",
          type: "cpu",
        },
        {
          icon:
            "https://i8.mifile.cn/b2c-mimall-media/7692726e7a1dd34a3b1b4ede8aca020d.png",
          text: "三摄像头",
          type: "camera",
        },
        {
          icon:
            "https://i8.mifile.cn/b2c-mimall-media/86a3bd46cf4f7f19daa2c3250cf30604.png",
          text: "超大屏",
          type: "screen",
        },
        {
          icon:
            "https://i8.mifile.cn/b2c-mimall-media/a5ab24dcb527e49f970f13b11e000ab1.png",
          text: "屏幕分辨率",
          type: "resolution",
        },
        {
          icon:
            "https://i8.mifile.cn/b2c-mimall-media/c8ec0829241324e401744da627482560.png",
          text: "极速畅玩",
          type: "ram",
        },
        {
          icon:
            "https://i8.mifile.cn/b2c-mimall-media/8941adac25333e785b9cc78ca11f4f27.png",
          text: "存储容量",
          type: "storage",
        },
        {
          icon:
            "https://i8.mifile.cn/b2c-mimall-media/52ad10a73685342e437e44ea3d29cbff.png",
          text: "普通厚度",
          type: "thickness",
        },
        {
          icon:
            "https://i8.mifile.cn/b2c-mimall-media/0b4ea0fb21dde2f29df3c20de73539b9.png",
          text: "超长待机",
          type: "battery",
        },
        {
          icon:
            "https://i8.mifile.cn/b2c-mimall-media/d1b67a407fb2a1ed42c2c0ce15af3318.png",
          text: "运营商网络",
          type: "telecom",
        },
        {
          icon:
            "https://i8.mifile.cn/b2c-mimall-media/bfd5ba9ae72c365dee42db14dfae4b0f.png",
          text: "网络模式",
          type: "network",
        },
      ],
      show: false,
      userComment:[],
      addShopCar:false,
      ItemNum:1,
      badge:0
    };
  },
  methods: {
    add:async function(){ 
      if(document.getElementsByName("UserComment")[0].value==="") return false
      this.addcontent=!this.addcontent
      try{
        let comment={
          itemID:this.$route.query.itemID,
          comment:document.getElementsByName("UserComment")[0].value,
          userName:"匿名用户"
        }
        let response = await fetch("http://localhost/PHP_Pro01/vue_pro01/addComment.php",{
          method:"POST",
          headers:{
            'Content-Type': 'application/json;charset=utf-8',
          },
          body:JSON.stringify(comment)
        })
        let result=await response.json()
        console.log(result)
        document.getElementsByName("UserComment")[0].value=""
        this.getComment()
      }catch(e){
        console.log(e)
      }
    },
    onChange: function (index) {
      // console.log(index);
      this.current = index;
    },
    goBack: function () {
      this.$router.go(-1);
    },
    toHome: function () {
      this.$router.push({ name: "HomePage" });
    },
    toConsult: function () {
      this.$router.push({ name: "Consult" });
    },
    toShopCar: function () {
      this.$router.push({ name: "ShopCar" });
    },
    getComment:function(){
      let itemID=this.$route.query.itemID
      this.axios.get("getComment.php?itemID="+itemID).then(response=>{
        console.log(response.data)
        this.userComment=(response.data).reverse()
      })
    },
    getBadge:function(){
      this.axios.get("extra/getTotal.php").then(response=>{
        this.badge=(response.data[0]['count'])
      })
    },
    buy:async function(){
      let Data={
        User:'1',
        ItemID:this.$route.query.itemID,
        Num:this.ItemNum
      }
      try{
        let response=await fetch("http://localhost/PHP_Pro01/vue_pro01/addShopCar.php",{
          method:"POST",
          headers:{
            'Content-Type': 'application/json;charset=utf-8',
          },
          body:JSON.stringify(Data)
        })
        let result=await response.json()
        this.addShopCar=!this.addShopCar
        this.$toast.success("添加成功")
        this.getBadge()
        console.log(result)
      }catch(e){
        console.log(e)
      }
    },
  },
  created() {
    this.getBadge()
    console.log(this.title);
    let itemID = this.$route.query.itemID;
    let getDetailImg = () => {
      return this.axios.get("getDetailImg.php?itemID=" + itemID);
    };
    let getDetailInfo = () => {
      return this.axios.get("getDetailInfo.php?itemID=" + itemID);
    };
    //并发执行
    this.axios.all([getDetailImg(), getDetailInfo()]).then(
      this.axios.spread((imgs, infos) => {
        this.imgList = imgs.data;
        this.infoList = infos.data;
        // console.log(this.infoList);
      })
    );
  },
  mounted(){
    setTimeout(() => {
      let div=document.getElementsByClassName("van-cell__value")[0]
      div.innerText='添加评论'
    }, 200);
    this.getComment()
  }
};
</script>

<style scoped>
.BuyPage{
  width: 100%;
  height: 500px;
  margin-top: 30px;
  position: relative;
}
.BuyBtn{
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  padding-left: 20px;
  padding-right: 20px;
}
.BuyInfo{
  width: 100%;
  position: absolute;
  height: 200px;
}
.BuyInfo img{
  width: 80px;
  height: 90px;
  position: absolute;
  left: 30px;
}
.van-button--block{
  border-radius: 19px;
}
.van-stepper{
  position: absolute;
  top: 40px;
  left: 140px;
}
.Comments{
  width: 100%;
  height: 60px;
  margin-bottom: 10px;
  border-bottom: 1px solid #e3e3e3;
}
.Comments a{
  display: block;
  width: 2.5em;
  height: auto;
  float: left;
  margin: .5em 0 0 2em;
}
.Comments div{
  font-size: 15px;
}
.UserComment{
  width: 100%;
  height: 100px;
}
.UserComment input{
  border: none;
  border-bottom: 1px solid #919191;
  width: 300px;
}
.UserComment ul{
  width: 100%;
}
.content {
  width: 374px;
  height: 500px;
  padding: 0 20px;
}
.content div {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
  font-size: 16px;
  color: #919191;
}
.content div span {
  margin-left: 30px;
  color: black;
}
.Pay {
  bottom: 0px;
  width: 100%;
  height: 60px;
}
.van-action-bar {
  height: 60px;
}
.Parameters {
  width: 100%;
  height: 80px;
  white-space: nowrap;
}
.Parameters ul {
  width: auto;
  height: 100%;
  overflow-x: auto;
  white-space: nowrap;
}
.Parameters li {
  height: 76px;
  width: 80px;
  margin-right: 20px;
  display: inline-block;
  text-align: center;
}
.Parameters li img {
  width: 1.1rem;
  height: 1.1rem;
}
.textInfo {
  height: 140px;
  text-align: left;
  padding-left: 20px;
  padding-top: 20px;
}
.textInfo span {
  font-size: 20px;
  font-weight: bold;
}
.textInfo ul {
  margin-top: 20px;
}
.textInfo ul li img {
  width: 15px;
  height: 15px;
  vertical-align: middle;
}
.textInfo ul li {
  font-size: 15px;
  margin-bottom: 5px;
}
.DetailInfo {
  width: 100%;
  height: 85vh;
  margin-top: 50px;
  overflow: auto;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 450px;
  text-align: center;
}
.my-swipe .van-swipe-item img {
  width: 100%;
  height: 100%;
}
.custom-indicator {
  color: white;
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 4px 6px;
  font-size: 16px;
  border-radius: 19px;
  background: rgba(0, 0, 0, 0.1);
}
.GoBack {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 999999;
}
.GoBack img {
  width: 100%;
  height: 100%;
}
.Information {
  width: 100%;
  height: 100px;
  margin-top: 20px;
}
.Price {
  color: #ff6700;
  font-size: 30px;
  text-align: left;
  padding-left: 20px;
}
.Price::before {
  content: "\A5";
}
/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}
</style>

